<template>
  <el-container>
    <el-header
      style="
        height: 80px;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 100;
        box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1);
      "
      class="main-header"
      :class="{ 'dark-header': isDark }"
    >
      <div
        @click="router.push('/')"
        style="display: flex; align-items: center; cursor: pointer"
      >
        <el-image
          style="height: 55px; width: 55px; margin-right: 20px"
          src="https://img.neptech.net/i/2025/06/20/j0u47g.webp"
        ></el-image>
        <span style="font-size: 30px">WoniuCFT</span>
      </div>

      <div class="right-header">
        <el-menu
          style="margin: 0 20px; height: 100%; border-bottom: none"
          :default-active="activeIndex"
          mode="horizontal"
          @select="handleSelect"
          :ellipsis="false"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">练习靶场</el-menu-item>
          <el-menu-item index="3">CTF考场</el-menu-item>
          <el-menu-item @click="handleClick()" index="4">代码审计</el-menu-item>
          <!-- <el-menu-item index="5">联系我们</el-menu-item> -->
        </el-menu>
        <!-- 昼夜切换按钮 -->
        <el-switch
          v-model="darkSwitch"
          style="--el-switch-on-color: #333; margin: auto 20px"
          size="large"
          inline-prompt
          active-icon="Moon"
          inactive-icon="Sunny"
          @click="toggleTheme"
        />
        <!-- AI助手按钮 -->
        <a @click="drawer = true" style="cursor: pointer">AI助手</a>
        <el-icon style="margin-right: 20px" size="30"
          ><Comment @click="drawer = true" style="cursor: pointer"
        /></el-icon>
        <UserComp />
      </div>
    </el-header>
    <el-main style="margin: 0; padding: 0">
      <RouterView v-model="drawer" />
    </el-main>
    <el-footer style="height: 50px">
      <p>Copyright © 2025 CTF在线考试系统</p>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import UserComp from "@/components/common/UserComp.vue";
import router from "@/router";
import { useDark, useToggle } from "@vueuse/core";
const drawer = defineModel();
const isDark = useDark();
const toggleDark = useToggle(isDark);
const darkSwitch = ref();
const route = useRoute();
const toggleTheme = (e: MouseEvent) => {
  const transition = document.startViewTransition(() => {
    toggleDark(); // 实际切换主题
  });
  transition.ready.then(() => {
    const x = e.clientX;
    const y = e.clientY;
    // 从点击点到窗口最远边缘的距离，这个距离即为圆的半径，用于确定一个圆形裁剪路径 (clip path) 的最大尺寸，以便覆盖整个视窗。
    // 勾股定理：a² + b² = c²
    const radius = Math.sqrt(
      Math.max(x, window.innerWidth - x) ** 2 +
        Math.max(y, window.innerHeight - y) ** 2
    ); //一个数的平方根

    const clipPath = [
      `circle(0 at ${x}px ${y}px)`,
      `circle(${radius}px at ${x}px ${y}px)`,
    ];
    // 实现过渡的过程 circle
    document.documentElement.animate(
      {
        clipPath: isDark.value ? clipPath.reverse() : clipPath,
      },
      {
        duration: 500,
        easing: "ease-in",
        pseudoElement: isDark.value
          ? "::view-transition-old(root)"
          : "::view-transition-new(root)",
      }
    );
  });
};

// 根据当前路由动态设置激活菜单
const activeIndex = computed(() => {
  const path = route.path;
  if (path.startsWith("/")) return "1";
  if (path.startsWith("/range")) return "2";
  if (path.startsWith("/contest")) return "3";
  if (path.startsWith("/vatask")) return "4";
  // if (path.startsWith("/backend")) return "5";
  return "1";
});

const handleSelect = (key: string) => {
  if (key === "4") {
    window.open("http://61.188.177.189:8765/index.html", "_blank");
    return;
  }
  // 路由映射表
  const routeMap: { [key: string]: string } = {
    "1": "/",
    "2": "/range",
    "3": "/contest",
    // "4": "/vatask",
    "5": "/backend",
  };
  router.push(routeMap[key]);
};
</script>
<style lang="scss">
.main-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-bottom: 2px solid rgba(92, 92, 92, 0.521);
  .right-header {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
}
.dark-header {
  background-color: #1a1a1a;
}

::v-deep .el-main {
  margin: 0;
  padding: 0;
  min-height: calc(100vh - 130px) !important;
  width: 100vw;
}

.el-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

//昼夜切换用伪对象
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
.dark::view-transition-old(root) {
  z-index: 9999;
}
</style>
